import axios from "axios";
axios.defaults.baseURL = 'http://localhost:3000'
import React, { useEffect, useState } from "react";
import { Sidebar, Toast, Grid } from 'react-vant';
import { useNavigate, Outlet } from 'react-router-dom';
import './css/cate.css'
import { Swiper, Image } from 'antd-mobile'
const list = [
    'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/u1721.jpg',
    'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/u1722.jpg',

]
const items = list.map((item, index) => (
    <Swiper.Item key={index}>
        <div>{<img src={item} alt="" className="img1" />}</div>
    </Swiper.Item>
))
let Home = () => {
    let navigate = useNavigate()
    const [active, setActive] = useState(0);
    const [categories, setCategories] = useState([]); // 分类数据
    const [fruit_list, setFruitList] = useState([]); // 水果列表
    useEffect(() => {
        const fetchCategories = async () => {
            try {
                const response = await axios.get('/meng/cate');
                setCategories(response.data.data); // 假设返回的数据是一个数组
                console.log(response.data.data)
            } catch (error) {
                console.error("获取分类数据失败:", error);
            }
        };
        fetchCategories();
    }, []);
    const getname = async (id) => {
        console.log(id)
        await axios.get('/meng/shop_list', { params: { _id: id } }).then(res => {
            console.log(res.data.data)
            setFruitList(res.data.data)
        })
    }
    return (
        <div className="cateAll">
            <div className="cateTop">
                111
            </div>
            <Sidebar
                value={active}
                onChange={(v) => {
                    setActive(v);
                }}
            >
                {categories.map((category, index) => (
                    
                    <Sidebar.Item
                        key={index}
                        contentStyle={{ backgroundColor: '#fff'}}
                        title={category.name} //分类 name 属性
                        onClick={() => getname(category._id)} //点击事件
                    >
                        <div className="swipe">
                            <Swiper
                                loop
                                autoplay
                                onIndexChange={i => {
                                }}
                            >
                                {items}
                            </Swiper>
                        </div>
                        <div className="grid">
                            <Grid columnNum={3} >
                                {fruit_list.map((item, itemIndex) => (
                                    <Grid.Item key={itemIndex}  onClick={()=>{navigate('/app/my')}}>
                                        <img src={item.image} alt="" style={{ width: '5rem', height: '5rem' }} />
                                        <div className="gridname">{item.name}</div>
                                    </Grid.Item>
                                ))}
                            </Grid>
                        </div>
                    </Sidebar.Item>
                ))}
            </Sidebar>
        </div>
    )
}

export default Home